<template>
  <view class="reward-detail-page">
    <!-- 自定义导航栏 -->
    <nav-bar title="赏金任务详情" :show-back="true"></nav-bar>
    
    <view class="reward-container">
      <!-- 任务状态卡片 -->
      <view class="status-card">
        <view class="reward-type" :class="rewardData.rewardType">
          <text>{{ rewardData.rewardType === 'pickup' ? '取件' : '求助' }}</text>
        </view>
        <view class="reward-status" :class="rewardData.rewardStatus">
          <text>{{ getStatusText(rewardData.rewardStatus) }}</text>
        </view>
      </view>
      
      <!-- 任务信息卡片 -->
      <view class="reward-card">
        <view class="reward-title">{{ rewardData.title }}</view>
        <view class="reward-amount">¥{{ rewardData.amount }}</view>
        <view class="reward-info">
          <view class="info-item">
            <text class="info-label">发布时间：</text>
            <text class="info-value">{{ rewardData.createTime }}</text>
          </view>
          <view class="info-item" v-if="rewardData.completeTime">
            <text class="info-label">完成时间：</text>
            <text class="info-value">{{ rewardData.completeTime }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">任务范围：</text>
            <text class="info-value">{{ getScopeText(rewardData.scope, rewardData.targetCampus) }}</text>
          </view>
        </view>
        
        <view class="reward-content">
          <text class="content-title">任务详情</text>
          <view class="content-text">{{ rewardData.content }}</view>
        </view>
        
        <view class="reward-images" v-if="rewardData.images && rewardData.images.length > 0">
          <image 
            v-for="(image, index) in rewardData.images" 
            :key="index" 
            :src="image" 
            mode="aspectFill" 
            class="reward-image"
            @click="previewImage(index)"
          ></image>
        </view>
        
        <view class="reward-delivery" v-if="rewardData.rewardType === 'pickup' && rewardData.deliveryAddress">
          <view class="delivery-title">
            <tn-icon name="map" size="32" color="#666666"></tn-icon>
            <text>送达地址</text>
          </view>
          <view class="delivery-address">{{ rewardData.deliveryAddress }}</view>
        </view>
      </view>
      
      <!-- 联系方式卡片 -->
      <view class="contact-card">
        <view class="card-title">联系方式</view>
        <view class="contact-info">
          <view class="contact-item">
            <text class="contact-label">联系人：</text>
            <text class="contact-value">{{ rewardData.contactName }}</text>
          </view>
          <view class="contact-item">
            <text class="contact-label">联系电话：</text>
            <text class="contact-value">{{ rewardData.contactPhone }}</text>
          </view>
          <view class="contact-item" v-if="rewardData.contactWechat">
            <text class="contact-label">联系微信：</text>
            <text class="contact-value">{{ rewardData.contactWechat }}</text>
          </view>
        </view>
      </view>
      
      <!-- 备注信息 -->
      <view class="remark-card" v-if="rewardData.remark">
        <view class="card-title">备注信息</view>
        <view class="remark-content">{{ rewardData.remark }}</view>
      </view>
      
      <!-- 发布者信息 -->
      <view class="publisher-card">
        <view class="card-title">发布者信息</view>
        <view class="user-info">
          <image class="user-avatar" :src="rewardData.userAvatar" mode="aspectFill"></image>
          <view class="user-detail">
            <view class="user-name">{{ rewardData.userName }}</view>
            <view class="user-school">{{ rewardData.schoolName }}</view>
          </view>
          <view class="user-buttons">
            <view class="follow-button" @click="followUser">{{ isFollowed ? '已关注' : '关注' }}</view>
          </view>
        </view>
      </view>
      
      <!-- 已接单用户信息 -->
      <view class="accepter-card" v-if="rewardData.acceptUserName">
        <view class="card-title">接单者信息</view>
        <view class="user-info">
          <image class="user-avatar" :src="rewardData.acceptUserAvatar" mode="aspectFill"></image>
          <view class="user-detail">
            <view class="user-name">{{ rewardData.acceptUserName }}</view>
            <view class="accept-time">接单时间：{{ rewardData.acceptTime }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="bottom-actions safe-area-inset-bottom" v-if="showBottomActions">
      <!-- 未接单状态 -->
      <view class="action-buttons" v-if="rewardData.rewardStatus === 'published'">
        <button class="report-btn" @click="reportTask">举报</button>
        <button 
          class="accept-btn" 
          v-if="rewardData.userId !== currentUserId"
          @click="acceptTask"
        >
          接单
        </button>
        <button 
          class="cancel-btn" 
          v-if="rewardData.userId === currentUserId"
          @click="cancelTask"
        >
          取消任务
        </button>
      </view>
      
      <!-- 已接单状态 - 发布者视角 -->
      <view class="action-buttons" v-if="rewardData.rewardStatus === 'accepted' && rewardData.userId === currentUserId">
        <button class="cancel-btn" @click="cancelAccepted">取消接单</button>
        <button class="complete-btn" @click="completeTask">确认完成</button>
      </view>
      
      <!-- 已接单状态 - 接单者视角 -->
      <view class="action-buttons" v-if="rewardData.rewardStatus === 'accepted' && rewardData.acceptUserId === currentUserId">
        <button class="contact-btn" @click="contactPublisher">联系发布者</button>
        <button class="cancel-btn" @click="cancelAccepted">取消接单</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import NavBar from '@/components/navbar/NavBar.vue';

// 获取页面参数
const rewardId = ref('');

// 当前用户ID
const currentUserId = ref(1001); // 实际项目中应该从全局状态或缓存中获取

// 任务数据
const rewardData = ref({
  id: 1,
  rewardType: 'pickup',
  title: '帮忙取顺丰快递',
  amount: 10,
  content: '今天下午有课，没时间去取快递。快递在学校南门顺丰站点，取件码：1234567890，预计下午3点送达。',
  images: [
    'https://picsum.photos/id/20/400/400'
  ],
  scope: 'current', // 'all'-不限，'current'-本校，'campus'-校区
  targetCampus: ['1'], // 校区ID列表
  deliveryAddress: '综合楼A栋502',
  contactName: '张三',
  contactPhone: '13800138000',
  contactWechat: 'zhangsan123',
  remark: '快递比较大，请有空的同学帮忙，谢谢！',
  rewardStatus: 'published', // published-已发布, accepted-已接单, completed-已完成, closed-已关闭
  userId: 101,
  userName: '星遇用户4',
  userAvatar: 'https://picsum.photos/id/1062/100/100',
  schoolName: '示例大学',
  viewCount: 128,
  createTime: '2023-05-15 14:30',
  completeTime: null,
  acceptUserId: null,
  acceptUserName: null,
  acceptUserAvatar: null,
  acceptTime: null
});

// 是否关注发布者
const isFollowed = ref(false);

// 是否显示底部操作栏
const showBottomActions = computed(() => {
  // 已完成或已关闭的任务不显示操作栏
  return rewardData.value.rewardStatus !== 'completed' && rewardData.value.rewardStatus !== 'closed';
});

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'published': '进行中',
    'accepted': '已接单',
    'completed': '已完成',
    'closed': '已关闭'
  };
  return statusMap[status] || status;
};

// 获取任务范围文本
const getScopeText = (scope, targetCampus) => {
  if (scope === 'all') return '不限校区';
  if (scope === 'current') return '本校区';
  if (scope === 'campus' && targetCampus && targetCampus.length > 0) {
    // 实际项目中应该从校区表中获取校区名称
    const campusNames = {
      '1': '主校区',
      '2': '医学校区',
      '3': '工学校区',
      '4': '西校区'
    };
    return targetCampus.map(id => campusNames[id] || id).join('、');
  }
  return '未知范围';
};

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: rewardData.value.images
  });
};

// 关注用户
const followUser = () => {
  isFollowed.value = !isFollowed.value;
  
  // 实际项目中应该调用API进行关注操作
  uni.showToast({
    title: isFollowed.value ? '已关注' : '已取消关注',
    icon: 'none'
  });
};

// 接单
const acceptTask = () => {
  uni.showModal({
    title: '确认接单',
    content: '确定要接受此任务吗？',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应该调用API进行接单操作
        rewardData.value.rewardStatus = 'accepted';
        rewardData.value.acceptUserId = currentUserId.value;
        rewardData.value.acceptUserName = '我';
        rewardData.value.acceptUserAvatar = 'https://picsum.photos/id/1005/100/100';
        rewardData.value.acceptTime = '2023-05-15 15:30';
        
        uni.showToast({
          title: '接单成功',
          icon: 'success'
        });
      }
    }
  });
};

// 取消任务
const cancelTask = () => {
  uni.showModal({
    title: '取消任务',
    content: '确定要取消此任务吗？',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应该调用API进行取消操作
        rewardData.value.rewardStatus = 'closed';
        
        uni.showToast({
          title: '任务已取消',
          icon: 'success'
        });
      }
    }
  });
};

// 取消接单
const cancelAccepted = () => {
  uni.showModal({
    title: '取消接单',
    content: '确定要取消接单吗？',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应该调用API进行取消接单操作
        rewardData.value.rewardStatus = 'published';
        rewardData.value.acceptUserId = null;
        rewardData.value.acceptUserName = null;
        rewardData.value.acceptUserAvatar = null;
        rewardData.value.acceptTime = null;
        
        uni.showToast({
          title: '已取消接单',
          icon: 'success'
        });
      }
    }
  });
};

// 确认完成
const completeTask = () => {
  uni.showModal({
    title: '确认完成',
    content: '确定任务已完成吗？确认后将自动支付赏金',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中应该调用API进行完成操作
        rewardData.value.rewardStatus = 'completed';
        rewardData.value.completeTime = '2023-05-15 16:30';
        
        uni.showToast({
          title: '任务已完成',
          icon: 'success'
        });
      }
    }
  });
};

// 联系发布者
const contactPublisher = () => {
  uni.navigateTo({
    url: `/pages/message/chat?userId=${rewardData.value.userId}&userName=${encodeURIComponent(rewardData.value.userName)}`
  });
};

// 举报任务
const reportTask = () => {
  uni.showActionSheet({
    itemList: ['虚假信息', '违禁信息', '诈骗信息', '其他'],
    success: function(res) {
      uni.showModal({
        title: '举报',
        content: '确认提交举报？',
        success: function(modalRes) {
          if (modalRes.confirm) {
            // 实际项目中应该调用API提交举报
            uni.showToast({
              title: '举报已提交',
              icon: 'success'
            });
          }
        }
      });
    }
  });
};

// 获取任务数据
const fetchRewardData = (id) => {
  // 实际项目中应该调用API获取任务数据
  console.log('获取任务数据:', id);
};

onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.$page.options;
  
  if (options.id) {
    rewardId.value = options.id;
    fetchRewardData(rewardId.value);
  }
  
  // 模拟已接单状态
  if (options.status === 'accepted') {
    rewardData.value.rewardStatus = 'accepted';
    rewardData.value.acceptUserId = 1002;
    rewardData.value.acceptUserName = '张同学';
    rewardData.value.acceptUserAvatar = 'https://picsum.photos/id/1025/100/100';
    rewardData.value.acceptTime = '2023-05-15 15:30';
  }
});
</script>

<style lang="scss" scoped>
.reward-detail-page {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.reward-container {
  padding: 20rpx;
}

// 任务状态卡片
.status-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .reward-type {
    padding: 8rpx 20rpx;
    border-radius: 6rpx;
    color: #ffffff;
    font-size: 26rpx;
    
    &.pickup {
      background-color: #32C5FF;
    }
    
    &.help {
      background-color: #BA68C8;
    }
  }
  
  .reward-status {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 26rpx;
    
    &.published {
      background-color: #76FF03;
      color: #333333;
    }
    
    &.accepted {
      background-color: #FFD600;
      color: #333333;
    }
    
    &.completed {
      background-color: #999999;
      color: #ffffff;
    }
    
    &.closed {
      background-color: #FF5252;
      color: #ffffff;
    }
  }
}

// 任务信息卡片
.reward-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .reward-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
    line-height: 1.4;
  }
  
  .reward-amount {
    font-size: 48rpx;
    color: #FF5252;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .reward-info {
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 20rpx;
    
    .info-item {
      display: flex;
      margin-bottom: 10rpx;
      font-size: 28rpx;
      
      .info-label {
        color: #999999;
        width: 180rpx;
      }
      
      .info-value {
        color: #333333;
        flex: 1;
      }
    }
  }
  
  .reward-content {
    margin-bottom: 20rpx;
    
    .content-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 16rpx;
    }
    
    .content-text {
      font-size: 30rpx;
      line-height: 1.6;
      color: #333333;
      word-break: break-all;
    }
  }
  
  .reward-images {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
    
    .reward-image {
      width: 220rpx;
      height: 220rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
      border-radius: 8rpx;
    }
  }
  
  .reward-delivery {
    background-color: #f8f8f8;
    padding: 20rpx;
    border-radius: 12rpx;
    
    .delivery-title {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      
      tn-icon {
        margin-right: 10rpx;
      }
    }
    
    .delivery-address {
      font-size: 28rpx;
      color: #333333;
      line-height: 1.6;
    }
  }
}

// 联系方式卡片
.contact-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .contact-info {
    .contact-item {
      display: flex;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      align-items: center;
      
      .contact-label {
        color: #999999;
        width: 160rpx;
      }
      
      .contact-value {
        color: #333333;
        flex: 1;
      }
    }
  }
}

// 备注信息卡片
.remark-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .remark-content {
    font-size: 28rpx;
    line-height: 1.6;
    color: #333333;
  }
}

// 发布者信息卡片
.publisher-card, .accepter-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    
    .user-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .user-detail {
      flex: 1;
      
      .user-name {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      
      .user-school, .accept-time {
        font-size: 26rpx;
        color: #999999;
      }
    }
    
    .user-buttons {
      .follow-button {
        padding: 12rpx 30rpx;
        background-color: #f5f5f5;
        border-radius: 30rpx;
        font-size: 26rpx;
      }
    }
  }
}

// 底部操作按钮
.bottom-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .action-buttons {
    display: flex;
    
    button {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      margin: 0 10rpx;
      
      &::after {
        border: none;
      }
    }
    
    .report-btn {
      flex: 0 0 160rpx;
      background-color: #f5f5f5;
      color: #999999;
    }
    
    .accept-btn {
      background-color: #76FF03;
      color: #333333;
    }
    
    .cancel-btn {
      background-color: #FF5252;
      color: #ffffff;
    }
    
    .complete-btn {
      background-color: #32C5FF;
      color: #ffffff;
    }
    
    .contact-btn {
      background-color: #BA68C8;
      color: #ffffff;
    }
  }
}
</style> 